<template>
    <div>
        <div class="canvas" ref="canvas"></div>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick} from 'vue';
import * as echarts from 'echarts';
import {apiCharts2} from '@/api/charts'
const canvas = ref(null) // dom实例
let myChart = ref({}) // echarts实例

//图表打点数据
const legendData = ref([])
//图表环形数据
const seriesData = ref([])
//总数，用于计算百分比
const total = ref(0)
//格式化legend显示文本的数组
const forMart = ref([])

onMounted(() => {
    //模拟请求数据
    apiCharts2().then(res => {
        legendData.value = res.legendData
        seriesData.value = res.seriesData
        //打点数据格式化
        res.seriesData.forEach(item => {
            total.value += item.value
        })
        res.seriesData.forEach(item => {
            forMart.value.push({
                name: item.name,
                value: `${item.name}   ${item.value}台  ${(item.value / total.value).toFixed(2) * 100}%`
            })
        })
        renderChart()

    })
})



const renderChart = () => {
    myChart.value = echarts.init(canvas.value)
    myChart.value.setOption({
        title: {
            text: '200',
            left: 'center',
            textStyle: {
                color: '#333',
                fontSize: 20
            },
            subtext: '主机(台)', // 副标题文本
            subleft: 'center', // 副标题水平位置
            subtextStyle: { // 副标题文本样式
                color: '#999', // 文本颜色
                fontSize: 14 // 字体大小
            }
        },

        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            icon: 'circle',
            top: 'center',
            right: '0%',
            itemGap: 20,
            padding: 0,
            data: legendData.value,
            formatter: (name, data)=> {
                let target = forMart.value.filter(item => item.name === name)
                return target[0].value
            }
        },
        series: [
            {
                name: '数量', // 如果不需要在图例中显示，这里可以留空
                type: 'pie',
                avoidLabelOverlap: false,
                center: ['25%', '50%'], // 第一个值（横坐标）设置为 25%，使环形图向左偏移
                radius: ['50%', '70%'], // 设置环形图的内半径和外半径
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }

                },
                labelLine: {
                    show: false
                },
                data: seriesData.value
            }
        ]
    });
}

window.addEventListener('resize', myChart.value.resize)
</script>

<style scoped>
.canvas {
    width: 100%;
    height: 17.64rem;
}
</style>